import React from 'react'
import { ChatMessage } from '@/types'
import { User, Bot } from 'lucide-react'
import MarkdownRender from './MarkdownRender'

interface MessageProps {
  message: ChatMessage
}

export const Message: React.FC<MessageProps> = ({ message }) => {
  const isUser = message.role === 'user'
  
  return (
    <div className={`flex gap-3 ${isUser ? 'flex-row-reverse' : 'flex-row'}`}>
      {/* 头像 */}
      {/* <div className={`w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0 ${
        isUser 
          ? 'bg-[#F6B610]' 
          : 'bg-gray-100 border border-gray-200'
      }`}>
        {isUser ? (
          <User className="w-4 h-4 text-white" />
        ) : (
          <Bot className="w-4 h-4 text-gray-600" />
        )}
      </div>
       */}
      {/* 消息内容 */}
      <div className={`max-w-[100%] ${isUser ? 'items-end' : 'items-start'} flex flex-col`}>
        <div
          className={`rounded-sm ${
            isUser
              ? 'bg-[#e6eefc] text-black rounded-br-md px-4 py-3'
              : 'bg-white text-gray-900 rounded-bl-md border border-white'
          }`}        >
          <div className="text-sm leading-relaxed whitespace-pre-wrap">
            {isUser ? (
              message.content
            ) : (
              <MarkdownRender markdown={message.content} />
            )}
          </div>
        </div>
        
        {/* 时间戳 */}
        <div className={`text-xs mt-1 px-1 ${
          isUser ? 'text-gray-400 text-right' : 'text-gray-400 text-left'
        }`}>
          {message.timestamp.toLocaleTimeString([], { 
            hour: '2-digit', 
            minute: '2-digit' 
          })}
        </div>
      </div>
    </div>
  )
}
